<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Web管理</title>
    {include file="/admin/head"/}
</head>

<body>
<div class="x-body">
    <div class="layui-form">
        <input type="text" id="id" name="id" value="{$info.id|default=0}" style="display: none;">
        <div class="layui-form-item">
            <label class="layui-form-label">
                企业Title
            </label>
            <div class="layui-input-inline">
                <input type="text" id="name" name="name" required lay-verify="required"
                       autocomplete="off" class="layui-input" value="{$info.name|default=''}">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">
                LOGO
            </label>
            <div class="layui-input-inline">
                <input type="text" id="image_id" value="{$info.image_id|default=0}" style="display:none;">
                <input type="file" id="image-file" style="display: none;" onchange="imagefile(this)" accept="image/*">
                <img src="{$info.image|default='/static/admin/img/none.jpg'}" id="image" onclick="imagesave()" style="max-width: 150px">
            </div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">
                负责人姓名
            </label>
            <div class="layui-input-inline">
                <input type="text" id="realname" name="name" required lay-verify="required"
                       autocomplete="off" class="layui-input" value="{$info.realname|default=''}">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">
                负责人职位
            </label>
            <div class="layui-input-inline">
                <input type="text" id="zhiwei" name="name" required lay-verify="required"
                       autocomplete="off" class="layui-input" value="{$info.zhiwei|default=''}">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">
                联系电话
            </label>
            <div class="layui-input-inline">
                <input type="text" id="mobile" name="name" required lay-verify="required"
                       autocomplete="off" class="layui-input" value="{$info.mobile|default=''}">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">
                传真号码
            </label>
            <div class="layui-input-inline">
                <input type="text" id="chuanzhen" name="name" required lay-verify="required"
                       autocomplete="off" class="layui-input" value="{$info.chuanzhen|default=''}">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">
                官方网站
            </label>
            <div class="layui-input-inline">
                <input type="text" id="web" name="name" required lay-verify="required"
                       autocomplete="off" class="layui-input" value="{$info.web|default=''}">
            </div>
        </div>
        <style>
            #hei{
                height: 100%;
                width: 100%;
                background: rgba(0,0,0,0.2);
                position: fixed;
                top:0px;
                left:0px;
            }
            #video-file-windows{
                position: absolute;
                top:30%;
                left:50%;
                margin-left: -230px;
                padding:0px 30px;
                width: 400px;
                height: 100px;
                background-color: #fff;
            }
            #progressContainer{

            }
            .an-button{
                width: 100%;
                margin-top: 20px;
                height: 30px;
            }
            .an-button a{
                width: 30%;
                display: inline-block;
                height: 30px;
                line-height: 30px;
                background-color: #93D1FF;
                margin:0px 1%;
                color:#fff;
                text-align: center;
            }
        </style>
        <div class="layui-form-item">
            <label class="layui-form-label">
                推广视频
            </label>
            <div class="layui-input-inline">
                <input type="file" id="video" name="video" class="layui-input" onchange="video_file(this)" accept="video/*">
                <div id="hei">
                    <div id="video-file-windows">
                        <div id="progressContainer" style="width: 100%; background: #f0f0f0; margin-top: 10px;">
                            <div id="progressBar" style="height: 20px; width: 0%; background: #4CAF50;"></div>
                        </div>
                        <div class="an-button">
                            <a href="javascript:kaishi();">开始</a>
                            <a href="javascript:tingxia();">暂停</a>
                            <a href="javascript:guanbi();">关闭</a>
                        </div>
                    </div>
                </div>
                <video src="{$info.video|default=''}"></video>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">
            </label>
            <button  class="layui-btn" lay-filter="add" lay-submit="">
                Confirm
            </button>
        </div>
    </div>
</div>
<script>
    var videofile = null,
        chunkSize = 1024 * 1024; // 1MB 每个分片
    function guanbi(){
        document.getElementById('hei').style = 'display:none;';
    }
    function kaishi(){

    }
    function tingxia(){

    }
    function video_open(start){
        let end = Math.min(start + chunkSize, file.size);
        let chunk = file.slice(start, end);
        xhr = new XMLHttpRequest();
        xhr.open('POST', 'upload.php', true);
        xhr.upload.onprogress = function(e) {
            if (e.lengthComputable) {
                const percentComplete = ((start + e.loaded) / file.size) * 100;
                document.getElementById('progressBar').style.width = percentComplete + '%';
            }
        };
        xhr.onload = function() {
            if (xhr.status === 200) {
                const response = JSON.parse(xhr.responseText);
                if (response.success) {
                    const nextStart = end;
                    if (nextStart < file.size && !isPaused) {
                        video_open(nextStart);
                    } else {
                        // 所有分片上传完成
                        completeUpload();
                    }
                }
            }
        };
    }
    function video_file(files){
        videofile = files[0];
        document.getElementById('hei').style = 'display:block;';
    }
    layui.use(['form','layer'], function(){
        $ = layui.jquery;
        var form = layui.form
            ,layer = layui.layer;
        //监听提交
        form.on('submit(add)', function(data){
            let message = {
                realname:document.getElementById('realname').value,
                zhiwei:document.getElementById('zhiwei').value,
                mobile:document.getElementById('mobile').value,
                chuanzhen:document.getElementById('chuanzhen').value,
                web:document.getElementById('web').value,
                image_id:document.getElementById('image_id').value
            };
            console.log(message);
            //发异步，把数据提交给php
            post('/sys/wxcard/save',message,'result');
        });
    });
    function post_result(res){
        if (res.code == 400) {
            layer.msg(res.msg,{icon:2,time:1000});
        }else{
            location.reload();
        }
    }
</script>
</body>
</html>